<template>
    <div class="new">
        <div class="bblue"></div>
        <div class="sblue"></div>
        <div class="newbox">
            <div class="helpme">帮我找房</div>
            <div class="input"><img src="../../static/QQ图片20210622093048.png" alt=""><input type="text" placeholder="请输入意向城市、区域" @blur="doInput(submitForm.city)" v-model="submitForm.city"></div>
            <div class="inputs"><input type="text" placeholder="请输入姓名" ><span style="color:#ccc">|</span><input type="text" placeholder="请输入手机号" @blur="doInput(submitForm.phone)" v-model="submitForm.phone"></div> 
            <div class="privacy"><img src="../../static/QQ截图20210622094038.jpg" alt="">隐私保护已开启</div>
            <div><button class="btn">发布需求</button></div>
            <div><button class="btnt">当前有148位置业顾问为您服务</button></div>
        </div>
        <div class="house">
            <img src="../../static/新房.jpg" alt="">
            <img src="../../static/找房.jpg" alt="">
            <img src="../../static/经纪人.jpg" alt="">
            <img src="../../static/楼市圈.jpg" alt="">
            
        </div>
    <div>{{sugdate}}</div>
    </div>
    
</template>

<script>
export default {
    data() {
        return {
            sugdate:"",
            search:'',
            submitForm: {
                phone: "",
                city:''
            }   
        }
    },
    computed:{
        fSearch(){
           console.log(this.search);
        }
    },
    methods:{
        doInput(val) {
            var regPhone = (/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/); //手机号码
            var regcity = (/^[\u4e00-\u9fa5]+$/)
            if(!regPhone.test(val)&&!regcity.test(val)){
                uni.showToast({
                title: '手机号格式错误或城市错误',
                icon: 'none'
            });
                return;
            }}
        }
    
}
</script>

<style lang="scss" scoped>
    .new{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .bblue{
        width: 100%;
        height: 100px;
        background: #309cfc;
    }

    .sblue{
        width: 100%;
        height: 30px;
        background: #0c7cf5;
    }

     .newbox{
        width: 90%;
        height: 350px;
        position:absolute;
        left:4%;
        top:20%;
        border-radius: 5%;
        box-shadow: 1px 1px #ccc;
    }

   

    .helpme{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px; 
        width: 100%;
        height: 40px;
        background: linear-gradient(180deg,#fed8d9,white);
        text-align: center;
        line-height: 40px;
        color: #ff666e;
        font-weight: 800;
    }

    .input{
        display: flex;
        border-bottom:#f9f9f9 solid 1px;
        //width: 100%;
    }

    .input img{
        //margin-top: 10px;
        width: 35px;
        height: 35px;
    }

     .input input{
        height: 50px;
        width: 48%;
    }

    .inputs{
        display: flex;
        border-bottom:#f9f9f9 solid 1px;
        //background: red;
        justify-content: space-between;
        height: 50px;
        line-height: 50px;
        //color: #ccc;
    }

    .inputs input{
        height: 50px;
        margin-left:5px ;
        width: 48%;
    }
    .privacy{
        display: flex;
        color: #ccc;
        font-size: 15px;
        font-weight: 800;
        height: 50px;
        line-height: 50px;
    }

    .privacy img{
        width: 50px;
        height: 50px;
    }

    .btn{
        margin-top: 15px;
        background: #ff666e;
        width: 95%;
        margin-left: 2%;
        border-radius: 5px;
        color: white;
    }

    .btnt{
        margin-top: 15px;
        border: #ff666e 1px solid;
        width: 95%;
        margin-left: 2%;
        border-radius: 25px;
        color: #ff666e; 
        background: white;
    }
    .house{
        position: absolute;
        top: 500px;
        width: 90%;
        margin-left: 4%;
    }
    .house img{
        width:45%;
        height: 70px;
        margin:5px;
    }
</style>